/* eslint-disable */
import React, { useState, useEffect } from 'react';
import { Table, Button } from 'antd';

import img from "../../../assets/logo-loading.gif"
import TreePagination from "../../common/TreePagination"
import styles from './AccountsReceivable.less';
import { downloadExcel } from '../../../services/home/homeService';
import moment from 'moment';
import { formatNoFixed, emptyText, reservedDecimalPlace } from '../../../utils/commonUtil';

const AccountsReceivableList = (props) => {

  const { accountsReceivableList, accountsReceivableLoading, onView, onEdit, personalizedColumn, allData, treeColumns, onPersonalizedColumn, adjust, down, details,
    searchParams } = props;
  const [checkedKeys, setCheckedKeys] = useState([])

  useEffect(() => {
    if (accountsReceivableList) {
      accountsReceivableList.forEach(item => item.adjust = adjust)
      accountsReceivableList.forEach(item => item.details = details)
    }
  }, [adjust, accountsReceivableList, details])

  const columns = [
    {
      title: '操作', key: 'operate', width: "100px", fixed: 'left', width: 130,
      render: (text, record) => (
        <span>
          <Button type="link" onClick={() => onView(record)} size="small" disabled={record.details} >查看</Button>
          <Button type="link" onClick={() => onEdit(record)} size="small" disabled={record.adjust} >账款调整</Button>
        </span>
      ),
    },
    { title: '归属机构', dataIndex: 'affiliatedInstitutionName', key: 'affiliatedInstitutionName', ellipsis: true, },
    { title: '出库通知单号', dataIndex: 'outboundOrderNumber', key: 'outboundOrderNumber', ellipsis: true, },
    { title: '销售订单号', dataIndex: 'sourcePrimaryKey', key: 'sourcePrimaryKey', ellipsis: true, },
    { title: '交易方名称', dataIndex: 'counterpartyName', key: 'counterpartyName', ellipsis: true, },
    { title: '主数据编码', dataIndex: 'masterDataEncoding', key: 'masterDataEncoding', ellipsis: true, },
    { title: '邓白氏编码', dataIndex: 'dunsCode', key: 'dunsCode', },
    {
      title: '交货单创建时间', dataIndex: 'deliveryOrderCreateTime', key: 'deliveryOrderCreateTime', width: 150,
      render: (text, record) => (<span>{text ? moment(text).format('YYYY-MM-DD') : ""}</span>),
    },
    {
      title: '发货过账时间', dataIndex: 'outboundTime', key: 'outboundTime', width: 120,
      render: (text, record) => (<span>{text ? moment(text).format('YYYY-MM-DD') : ""}</span>),
    },
    {
      title: '发货金额', dataIndex: 'totalPrice', key: 'totalPrice',
      render: (text, record) => (<span>{text ? formatNoFixed(reservedDecimalPlace(text, 2)) : 0}</span>),
    },
    {
      title: '开票时间', dataIndex: 'invoiceTime', key: 'invoiceTime', width: 120,
      render: (text, record) => (<span>{text ? moment(text).format('YYYY-MM-DD') : ""}</span>),
    },
    {
      title: '开票金额', dataIndex: 'creditAmount', key: 'creditAmount',
      render: (text, record) => (<span>{text ? formatNoFixed(reservedDecimalPlace(text, 2)) : 0}</span>),
    },
    {
      title: '应收金额', dataIndex: 'actuallyTake', key: 'actuallyTake',
      render: (text, record) => (<span>{text ? formatNoFixed(reservedDecimalPlace(text, 2)) : 0}</span>),
    },
    {
      title: '回款金额', dataIndex: 'cancelAmount', key: 'cancelAmount',
      render: (text, record) => (<span>{text ? formatNoFixed(reservedDecimalPlace(text, 2)) : 0}</span>),
    },
    { title: '交易币种', dataIndex: 'currency', key: 'currency', width: 100 },
    { title: '起算节点', dataIndex: 'countNodeName', key: 'countNodeName', width: 150 },
    { title: '支付比例（%）', dataIndex: 'paymentRatio', key: 'paymentRatio', width: 120 },
    { title: '账期', dataIndex: 'paymentDays', key: 'paymentDays', width: 100 },
    {
      title: '账期起算日', dataIndex: 'paymentDaysZeroDate', key: 'paymentDaysZeroDate', width: 100,
      render: (text, record) => (<span>{text ? moment(text).format('YYYY-MM-DD') : ""}</span>),
    },
    {
      title: '到期日', dataIndex: 'maturityDate', key: 'maturityDate', width: 100,
      render: (text, record) => (<span>{text ? moment(text).format('YYYY-MM-DD') : ""}</span>),
    },
    {
      title: '是否逾期', dataIndex: 'isOverdue', key: 'isOverdue', width: 100,
      // render: (text) => (<div>{text == 1 ? '未逾期' : (text == 0 ? '逾期' : '')}</div>)
    },
    {
      title: '逾期天数', dataIndex: 'overDueDay', key: 'overDueDay', width: 100,
      render: (text) => (<div>{text > 0 ? text : ''}</div>)
    },
    {
      title: '是否回款', dataIndex: 'isCancel', key: 'isCancel', width: 100,
      // render: (text) => (<div>{text == 1 ? '未回款' : (text == 0 ? '已回款' : '')}</div>)
    },
    {
      title: '调整原因', dataIndex: 'lateReason', key: 'lateReason', ellipsis: true,
      render: (text, record) => (<span>{record.overdueManagement ? record.overdueManagement.lateReason : ""}</span>),
    },
    { title: '业务员', dataIndex: 'businessPeopleName', key: 'businessPeopleName' },
  ];

  const treePaginationProps = {
    personalizedColumn,
    allData,
    treeColumns,
    onPersonalizedColumn,
    customKey: "accountsReceivable"
  }

  const onExport = () => {
    let headerNames = []
    let fieldNames = personalizedColumn
    let lineWidths = []
    fieldNames.forEach(item => {
      columns.forEach(i => {
        if (item === i.key) {
          headerNames.push(i.title)
          lineWidths.push(80)
        }
      })
    })
    downloadExcel({ headerNames, fieldNames, lineWidths, map: searchParams ? JSON.stringify(searchParams) : null, sign: 21 }, "应收账款管理").then(res => {
    });
  };


  useEffect(() => {
    let list = ["operate"]
    let data = []
    columns.forEach(item => {
      if (list.indexOf(item.key) > -1) data.push(item)
    })
    personalizedColumn.forEach(item => {
      columns.forEach(i => {
        if (item == i.key) data.push(i)
      })
    })
    setCheckedKeys(data)
  }, [personalizedColumn])

  return (
    <div>
      <div className={styles.toolbarText}>
        <div>应收账款管理列表</div>
        <div>
          <Button onClick={() => onExport()} disabled={down}>导 出</Button>
          <TreePagination {...treePaginationProps} />
        </div>
      </div>
      <Table
        size="small"
        tableLayout="fixed"
        locale={{ emptyText }}
        columns={checkedKeys}
        dataSource={accountsReceivableList}
        pagination={false}
        scroll={{ x: 3500 }}
        loading={accountsReceivableLoading ? { indicator: <div><img src={img}></img></div> } : false}
        rowKey={record => record.id}
      />
    </div>
  );
}

export default AccountsReceivableList;
